<template>
  <div class="box">
    <div class="top-bg" ref='vantaRef'>
      <div class="tx-box">
        <div class="zuo-box">
          <el-avatar :src="user.avatarUrl" :size="50" icon="el-icon-user-solid"></el-avatar>
        </div>
        <div class="you-box">
          <span style="color: white;font-size: 18px;font-weight: bolder;">待我ikun更强大,定帮坤哥赢天下。</span>
          <input placeholder="编辑个性签名" type="text" v-model="qainming">
        </div>
      </div>
    </div>
    <div class="center-BOX">
      <div class="left-box">
        <el-card class="card-box1">
          <ul class="xj-box">
            <li>
              <img style="margin-right: 10px;" src="../../assets/icon/新建.png" alt="">
              <div>
                <span @click="dialogFormVisible = true">新建收藏夹</span>
                <el-dialog :append-to-body="true" title="收藏夹信息" :visible.sync="dialogFormVisible">
                  <el-form>
                    <div class="top-form">
                      <span>收藏夹封面</span>
                      <div class="el-sctp-box" style="margin-top: 20px;">
                        <el-upload
                        action="#"
                        list-type="picture-card"
                        :auto-upload="false">
                          <i slot="default" class="el-icon-plus"></i>
                          <div slot="file" slot-scope="{file}">
                            <img
                              class="el-upload-list__item-thumbnail"
                              :src="file.url" alt=""
                            >
                            <span class="el-upload-list__item-actions">
                              <span
                                class="el-upload-list__item-preview"
                                @click="handlePictureCardPreview(file)"
                              >
                                <i class="el-icon-zoom-in"></i>
                              </span>
                              <span
                                v-if="!disabled"
                                class="el-upload-list__item-delete"
                                @click="handleDownload(file)"
                              >
                                <i class="el-icon-download"></i>
                              </span>
                              <span
                                v-if="!disabled"
                                class="el-upload-list__item-delete"
                                @click="handleRemove(file)"
                              >
                                <i class="el-icon-delete"></i>
                              </span>
                            </span>
                          </div>
                      </el-upload>
                      </div>
                    </div>
                    <div class="center-form" style="margin-top: 20px;">
                      <span>收藏文件夹名称</span>
                      <br>
                      <input class="ipt-name" type="text" placeholder="收藏文件夹名称">
                    </div>
                    <div class="bottom-form"  style="margin-top: 20px;">
                      <span>简介：</span>
                      <textarea class="fawc-ipt" type="text" v-model="text" placeholder="可填写简介"/>
                      <el-checkbox label="公开收藏夹"></el-checkbox>
                    </div>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button style="margin-right: 20px;" @click="dialogFormVisible = false">取 消</el-button>
                    <div @click="cgTckuang">
                    <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                  </div>
                </el-dialog>
              </div>
            </li>
            
            <li>
              <img style="margin-right: 10px;width: 16px;" src="../../assets/icon/收藏夹.png" alt="">
              <span>默认收藏夹</span>
            </li>
          </ul>
          <hr>
          <ul class="ht-box">
            <li v-for="list in navList" :key="list.id" @click="pathChildren(list.id-1)">
              <img style="margin-right: 10px;width: 16px;" src="../../assets/icon/私密文件夹.png" alt="">
              
              <span>{{ list.name }}</span>
            </li>
            <li @click="toBji">
              <img style="margin-right: 10px;width: 16px;" src="../../assets/icon/私密文件夹.png" alt="">
              <span>我的笔记本</span>
            </li>
          </ul>
        </el-card>
      </div>
      <div class="center-box">
        <el-card class="card-box2">
          <router-view/>
        </el-card>
      </div>
      </div>
  </div>
</template>

<script>
import * as THREE from "three";
import Fog from "vanta/src/vanta.fog";
export default {
  name: 'JkdsShoucang',

  data() {
    return {
      // form:'',
      text:'',
      qainming:'',
      navList:[
        {
          id:1,
          name:'话题收藏夹',
        },
        {
          id:2,
          name:'专题收藏夹',
        },
        {
          id:3,
          name:'专栏收藏夹',
        },
        {
          id:4,
          name:'相册收藏夹',
        },
        {
          id:5,
          name:'课程收藏夹',
        },
      ],
      dialogFormVisible: false,
        formLabelWidth: '120px',
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        user : localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")): {},
        // titleValue: this.$route.meta.title,
    };
  },
  // watch:{
  //   "$route.meta.title":{
  //     handler(){
  //       this.titleValue = this.$route.meta.title
  //     }
  //   }
  // },
  mounted() {
    console.log(this.user);
    // this.textList[0].classClick = 'classClick';
    this.vantaEffect = Fog({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
    this.vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      highlightColor: 0xfc9046,
      midtoneColor: 0xc843a0,
      lowlightColor: 0x5b5b96,
      baseColor: 0xffffff,
      blurFactor: 0.67,
      zoom: 0.5
    })
  },
  beforeDestroy() {
       if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },

  methods: {
    handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      pathChildren(index){
      // console.log('调用了',this.textList[index]);
      //  this.textList.forEach(element => {
      //   element.classClick = '';
      //  });
      //  this.textList[index].classClick = 'classClick';
      // //  console.log('调用了',this.textList[index]);
      switch(index){
        case 0:
          this.$router.push('/front/shoucang/huati')
          break;
          case 1:
          this.$router.push('/front/shoucang/zhuanti')
          break;
          case 2:
          this.$router.push('/front/shoucang/zhuanlan')
          break;
          case 3:
          this.$router.push('/front/shoucang/xiangce')
          break;
          case 4:
          this.$router.push('/front/shoucang/minKecheng')
          break;
          // case 5:
          // this.$router.push('/front/xinxi/cundang')
          // break;
        }
      },
      cgTckuang(){
        this.$message({
          message: '提交成功！',
          type: 'success'
        });
      },
      toBji(){
        this.$router.push("/front/biji")
      },
  }
}
</script>

<style lang="less" scoped>
.top-bg{
    width: 1300px;
    height: 200px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  .tx-box{
    width: 100%;
    height: 100px;
    // background-color: red;
    display: flex;
    align-items: center;
    .zuo-box{
      margin-left: 20px;
    }
    .you-box{
      height: 50px;
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      input{
        width: 500px;
        height: 25px;
        padding: 10px;
        border: none;
        background: rgba(255, 255, 255, 0);
        color: rgb(168, 168, 168);
      }
      input:focus{
        outline:none;
        border: 1px solid white;
      }
      input:hover{
        border: 1px solid white;
        background: rgba(255, 255, 255, 0.274);
      }
    }
  }
}
.box{
  width: 100%;
  height: 100%;
  .center-BOX{
    width: 1300px;
    height: 660px;
    margin: 0 auto;
    display: flex;
    margin-top: 20px;
    // background-color: red;
    .left-box{
    width: 300px;
    .card-box1{
      width: 100%;
      height: 80%;

    }
  }
  }
}
  .center-box{
    width: 100%;
    height: 80%;
    margin-left: 20px;
    .card-box2{
      width: 100%;
      height: 100%;
    }
  }
 
::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
}
::v-deep .el-upload {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
::v-deep .avatar {
  width: 100px;
  height: 100px;
}
.ipt-name{
  width: 100%;
  height: 40px;
  padding: 10px;
  border: 1px solid rgba(128, 128, 128, 0.466);
  margin-top: 20px;
}
.ipt-name:focus {
  outline:none;
  border: 1px solid rgba(128, 128, 128, 0.466);
}
.fawc-ipt{
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid rgba(128, 128, 128, 0.466);
  resize:none;
  margin-top: 20px;
}
.fawc-ipt{
  border: 1px solid rgba(128, 128, 128, 0.466);
}
.xj-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  li{
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor :pointer;
  }
  li:hover{
    background-color: rgba(128, 128, 128, 0.192);
  }
}
.ht-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  li{
    width: 100%;
    height: 30px;
    margin-top: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor :pointer;
  }
  li:hover{
    background-color: rgba(128, 128, 128, 0.192);
  }
}
.dialog-footer{
  display: flex;
  justify-content: flex-end;
}
</style>